<!-- 审批 SB 们的列表 -->
<template>
  <el-dialog v-model="dialogTableVisible" title="选择审批人" width="600" @closed="handlerClosed">
    <div class="search-content">
      <div class="search-section">
        <el-input v-model="iptSearchValue" clearable style="width: 100%" placeholder="检索内容" class="input-with-select">
          <template #prepend>
            <el-select v-model="sltType" placeholder="Select" style="width: 80px">
              <el-option label="用户" :value="1" />
              <el-option label="项目" :value="2" />
            </el-select>
          </template>
        </el-input>
        <div class="list-section">
          <el-scrollbar height="444px">
            <div class="list-section-bd">
              <SectionUserCell v-for="item in sectionCells" :key="item.id" :status="item.status" :text="item.text" @click="handlerClickUser(item)" />
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="selected-section">
        <el-scrollbar height="500px">
          <div class="selected-section-bd">
            <el-button type="primary" class="cell" v-for="item in sectionCheckedCells" :key="item.id">{{ item.text }}</el-button>
            <el-button v-if="selectedCell" type="primary" class="cell">{{ selectedCell.text }}</el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClickCancel">取消</el-button>
        <el-button type="primary" @click="handleBtnClickSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import Api from '../../api'
import SectionUserCell from './SectionUserCell.vue'
import { useProjectssStore } from '../../stores'

const dialogTableVisible = ref(false)
const iptSearchValue = ref('')
const sltType = ref(1)
const userList = ref<any[]>([])
const sectionCells = ref<any[]>([])
// const sectionCheckedCells = ref<any[]>([])
const selectedCell = ref<any>(null)

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
})
const sectionCheckedCells = computed<any[]>(() => props.modelValue)

const emit = defineEmits(['update:modelValue', 'closed'])

const handleBtnClickCancel = () => {
  dialogTableVisible.value = false
}

const handleBtnClickSubmit = () => {
  dialogTableVisible.value = false
  if (selectedCell.value) {
    emit('update:modelValue', [].concat(...(sectionCheckedCells.value as any[]), selectedCell.value))
  }
  // emit('update:modelValue', [].concat(...(sectionCheckedCells.value as any[]), selectedCell.value))
}

const handlerClickUser = (item: any) => {
  selectedCell.value = item
  sectionCells.value.map((e) => {
    if (e.status === 1) {
      e.status = 0
    }
  })
  item.status = 1
}

const handlerClosed = () => {
  emit('closed')
}

watch(
  () => sltType.value,
  async (val) => {
    iptSearchValue.value = ''
    if (val === 1) {
      sectionCells.value = userList.value.map((item) => {
        const idx = sectionCheckedCells.value.findIndex((e) => e.id === item.userId)
        let status = idx > -1 ? 2 : 0
        if (idx === -1 && selectedCell.value) {
          status = selectedCell.value.id === item.userId ? 1 : 0
        }
        return {
          id: item.userId,
          text: item.nickName,
          userId: item.userId,
          userName: item.userName,
          nickName: item.nickName,
          status,
        }
      })
    } else if (val === 2) {
      sectionCells.value = useProjectssStore()
        .getAllState()
        .map((item) => {
          const idx = sectionCheckedCells.value.findIndex((e) => e.id === item.id)
          let status = idx > -1 ? 2 : 0
          if (idx === -1 && selectedCell.value) {
            status = selectedCell.value.id === item.id ? 1 : 0
          }
          return {
            id: item.id,
            text: item.cname,
            userId: 0,
            userName: '',
            nickName: '',
            status,
          }
        })
    }
  }
)

/**
 * 打开对话框并初始化数据
 */
const openDialog = async () => {
  sltType.value = 1
  dialogTableVisible.value = true
  userList.value = await Api.Users.getAll({ pageSize: 9999, status: 0 })

  sectionCells.value = userList.value.map((item) => {
    const idx = sectionCheckedCells.value.findIndex((e) => e.id === item.userId)
    return {
      id: item.userId,
      text: item.nickName,
      userId: item.userId,
      userName: item.userName,
      nickName: item.nickName,
      status: idx > -1 ? 2 : 0,
    }
  })
  selectedCell.value = null
}

watch(
  () => iptSearchValue.value,
  (val) => {
    if (!val) {
      if (sltType.value === 1) {
        sectionCells.value = userList.value.map((item) => {
          const idx = sectionCheckedCells.value.findIndex((e) => e.id === item.userId)
          let status = idx > -1 ? 2 : 0
          if (idx === -1) {
            status = selectedCell.value.id === item.userId ? 1 : 0
          }
          return {
            id: item.userId,
            text: item.nickName,
            userId: item.userId,
            userName: item.userName,
            nickName: item.nickName,
            status,
          }
        })
      } else if (sltType.value === 2) {
        sectionCells.value = useProjectssStore()
          .getAllState()
          .map((item) => {
            const idx = sectionCheckedCells.value.findIndex((e) => e.id === item.id)
            return {
              id: item.id,
              text: item.cname,
              userId: 0,
              userName: '',
              nickName: '',
              status: idx > -1 ? 2 : 0,
            }
          })
      }
    } else {
      const result = val.trim()
      const tempCells = Object.assign(sectionCells.value, [])
      sectionCells.value = tempCells.filter((item) => item.text.includes(result))
    }
  }
)

defineExpose({ openDialog })
</script>
<style lang="scss" scoped>
.search-content {
  display: flex;
  height: 500px;
  .search-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    .list-section {
      flex: 1;
      margin-top: 16px;
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      .list-section-bd {
        padding: 16px 16px 0;
        box-sizing: border-box;
      }
    }
  }
  .selected-section {
    flex: 1;
    margin-left: 16px;
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    .selected-section-bd {
      padding: 16px 16px 0;
      box-sizing: border-box;
      .cell {
        display: block;
        width: 100%;
        text-align: left;
        margin: 0px 0 16px;
      }
    }
  }
}
</style>
